<template>
    <div class="container">
        <div class="content">
            <div class="course-list">
                <h3>课程列表</h3>
                <div v-for="course in coursesData" :key="course.id" class="course-item"
                    :style="{ backgroundColor: course.color }" draggable="true"
                    @dragstart="handleDragStart($event, course)" @dragend="handleDragEnd">
                    {{ course.name }}
                </div>
            </div>

            <table class="timetable">
                <tr>
                    <th>时间</th>
                    <th v-for="(day, index) in weekDays" :key="index">
                        {{ day.name }}<br>
                        <span class="date-header">{{ day.date }}</span>
                    </th>
                </tr>
                <tr v-for="(time, timeIndex) in timeSlots" :key="timeIndex">
                    <th>{{ time }}</th>
                    <td v-for="(day, dayIndex) in weekDays" :key="dayIndex" :data-time-index="timeIndex"
                        :data-day-index="dayIndex" @dragover.prevent
                        @dragenter="handleDragEnter($event, timeIndex, dayIndex)" @dragleave="handleDragLeave"
                        @drop="handleDrop($event, timeIndex, dayIndex)"
                        @click="handleCellClick($event, timeIndex, dayIndex)"
                        :class="{ 'filled-cell': getCellContent(timeIndex, dayIndex) }"
                        :style="getCellStyle(timeIndex, dayIndex)" :draggable="!!getCellContent(timeIndex, dayIndex)"
                        @dragstart="handleCellDragStart($event, timeIndex, dayIndex)">
                        <span v-if="getCellContent(timeIndex, dayIndex)">
                            {{ getCellContent(timeIndex, dayIndex) }}
                        </span>
                    </td>
                </tr>
            </table>
        </div>
        <button class="view-schedule" @click="viewSchedule">查看课表信息</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                coursesData: [
                    { id: 1, name: '语文', teacher: '张老师', classroom: '301', color: '#FF6B6B' },
                    { id: 2, name: '数学', teacher: '李老师', classroom: '302', color: '#4ECDC4' },
                    { id: 3, name: '英语', teacher: '王老师', classroom: '303', color: '#45B7D1' },
                    { id: 4, name: '物理', teacher: '赵老师', classroom: '304', color: '#96CEB4' },
                    { id: 5, name: '化学', teacher: '刘老师', classroom: '305', color: '#FFEEAD' },
                    { id: 6, name: '生物', teacher: '孙老师', classroom: '306', color: '#D4A5A5' }
                ],
                weekDays: [
                    { name: '周一', date: '12月4日' },
                    { name: '周二', date: '12月5日' },
                    { name: '周三', date: '12月6日' },
                    { name: '周四', date: '12月7日' },
                    { name: '周五', date: '12月8日' },
                    { name: '周六', date: '12月9日' },
                    { name: '周日', date: '12月10日' }
                ],
                timeSlots: [
                    '8:00-9:40',
                    '10:00-11:40',
                    '14:00-15:40',
                    '16:00-17:40'
                ],
                schedule: {},
                draggedCourse: null,
                clickTimer: null,
                cellUniqueId: 0
            }
        },
        methods: {
            handleDragStart(event, course) {
                this.draggedCourse = {
                    ...course,
                    source: 'list',
                    uniqueId: null
                };
                event.target.classList.add('highlight');
            },

            handleCellDragStart(event, timeIndex, dayIndex) {
                const key = `${timeIndex}-${dayIndex}`;
                if (this.schedule[key]) {
                    this.draggedCourse = {
                        ...this.schedule[key],
                        source: 'cell',
                        originalKey: key
                    };
                    event.target.classList.add('highlight');
                }
            },

            handleDragEnd(event) {
                event.target.classList.remove('highlight');
                this.draggedCourse = null;
            },

            handleDragEnter(event, timeIndex, dayIndex) {
                if (!this.draggedCourse) return;
                event.target.classList.add('dragging-over');

                if (!this.getCellContent(timeIndex, dayIndex)) {
                    event.target.style.backgroundColor = this.draggedCourse.color;
                    event.target.style.color = 'white';
                }
            },

            handleDragLeave(event) {
                event.target.classList.remove('dragging-over');
                if (!event.target.textContent.trim()) {
                    event.target.style.backgroundColor = '';
                    event.target.style.color = '';
                }
            },

            handleDrop(event, timeIndex, dayIndex) {
                event.preventDefault();
                if (!this.draggedCourse) return;

                const key = `${timeIndex}-${dayIndex}`;

                if (this.draggedCourse.source === 'cell') {
                    if (this.draggedCourse.originalKey) {
                        this.$delete(this.schedule, this.draggedCourse.originalKey);
                    }
                    this.$set(this.schedule, key, {
                        ...this.draggedCourse,
                        uniqueId: this.draggedCourse.uniqueId
                    });
                } else {
                    this.$set(this.schedule, key, {
                        ...this.draggedCourse,
                        uniqueId: ++this.cellUniqueId
                    });
                }

                event.target.classList.remove('dragging-over');
                this.draggedCourse = null;
            },

            handleCellClick(event, timeIndex, dayIndex) {
                const key = `${timeIndex}-${dayIndex}`;
                if (!this.schedule[key]) return;

                if (this.clickTimer === null) {
                    this.clickTimer = setTimeout(() => {
                        const course = this.schedule[key];
                        console.log('课程信息:', {
                            id: course.id,
                            name: course.name,
                            teacher: course.teacher,
                            classroom: course.classroom
                        });
                        this.clickTimer = null;
                    }, 200);
                } else {
                    clearTimeout(this.clickTimer);
                    this.clickTimer = null;
                    this.$delete(this.schedule, key);
                }
            },

            getCellContent(timeIndex, dayIndex) {
                const key = `${timeIndex}-${dayIndex}`;
                return this.schedule[key]?.name || '';
            },

            getCellStyle(timeIndex, dayIndex) {
                const key = `${timeIndex}-${dayIndex}`;
                const course = this.schedule[key];
                return course ? {
                    backgroundColor: course.color,
                    color: 'white'
                } : {};
            },

            viewSchedule() {
                const dailySchedule = {};

                Object.entries(this.schedule).forEach(([key, course]) => {
                    const [timeIndex, dayIndex] = key.split('-');
                    const day = this.weekDays[dayIndex].name;
                    const date = this.weekDays[dayIndex].date;

                    if (!dailySchedule[day]) {
                        dailySchedule[day] = {
                            day,
                            date,
                            courses: []
                        };
                    }

                    dailySchedule[day].courses.push({
                        time: this.timeSlots[timeIndex],
                        id: course.id,
                        name: course.name,
                        teacher: course.teacher,
                        classroom: course.classroom
                    });
                });

                const scheduleInfo = Object.values(dailySchedule);
                console.log('课表信息:', scheduleInfo);
            }
        }
    }
</script>

<style scoped>
    .container {
        display: flex;
        margin: 20px;
        flex-direction: column;
        position: relative;
    }

    .content {
        display: flex;
    }

    .course-list {
        width: 200px;
        padding: 10px;
        border: 1px solid #ccc;
    }

    .course-item {
        padding: 10px;
        margin: 5px;
        cursor: move;
        border-radius: 4px;
        color: white;
    }

    .timetable {
        margin-left: 20px;
        border-collapse: collapse;
    }

    .timetable th,
    .timetable td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
        min-width: 100px;
        height: 40px;
        position: relative;
    }

    .timetable th {
        background: #f0f0f0;
    }

    .date-header {
        font-size: 12px;
        color: #666;
    }

    .highlight {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        transform: scale(1.02);
        transition: all 0.2s;
    }

    .dragging-over {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .filled-cell {
        transition: all 0.3s;
    }

    .filled-cell :hover {
        opacity: 0.7;
    }

    .view-schedule {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 10px 20px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 20px;
    }

    .view-schedule:hover {
        background: #45a049;
    }
</style>